<script>
export default {
  name: "TarBar",
  props: {
    tabbarIndex: {
      type: [Number, String],
      required: true
    }
  },
  computed: {
    tabbarUrl() {
      const map = {
        0: '/pages/index/index',
        1: '/pages/Category/Category',
        2: '/pages/Cart/Cart',
        3: '/pages/My/My'
      }
      return map[this.tabbarIndex]
    }
  },
  methods: {
    onChange(event) {
      // event.detail 拿到的是子项的 name 值
      // 为什么这里要使用 uni.switchTab 来切换页面呢？因为 vantweapp 实现的切换不能被拦截器拦截
      // uniapp 会把每个 vue 文件包在一个闭包里并且提供 wx，uni 对象，vantweapp 文件不是 vue 文件
      // 所以没有闭包，拦截不到他的 switchTab 方法
      uni.switchTab({url: event.detail})
    }
  }
}
</script>

<template>
  <van-tabbar active-color="#ee0a24" inactive-color="#000" :active="tabbarUrl" @change="onChange">
    <van-tabbar-item name="/pages/index/index" icon="wap-home-o">首页</van-tabbar-item>
    <van-tabbar-item name="/pages/Category/Category" icon="apps-o">分类页
    </van-tabbar-item>
    <van-tabbar-item name="/pages/Cart/Cart" icon="shopping-cart-o">购物车
    </van-tabbar-item>
    <van-tabbar-item name="/pages/My/My" icon="user-o">我的</van-tabbar-item>
  </van-tabbar>
</template>

<style lang="less"></style>
